<template>
	<view class="container">
		<cu-header bgColor="bg-gradual-blue" :isBack="true">
			<block slot="content" class="page-name">商城</block>
		</cu-header>
		<view class="contents">
			<cu-search bgColor="bg-gradual-blue" @onclick="onSeeker" @oninput="onChange"></cu-search>
			<cu-tabbar :datas="tabs" @onchange="onSwitchTab"></cu-tabbar>
			<view v-if="current==0">
				<cu-swiper></cu-swiper>
				<view class="padding-left-sm padding-right-sm">
					<cu-grid cols="5" :datas="menus"></cu-grid>
					<view class="cu-card radius bg-white margin-top-sm ">
						<cu-title title="排行榜" hint="闭眼跟榜买" modal="3"></cu-title>
						<view class="padding-lr">
							<cu-grid-media cols="3" :datas="goods" @onchange="onSelectItem"></cu-grid-media>
						</view>

					</view>
					<view class="cu-card radius bg-white margin-top-sm ">
						<cu-title title="精选商品" hint="每日为你精选" modal="3"></cu-title>
						<view class="padding-lr">
							<cu-grid-media cols="2" :datas="goods" @onchange="onSelectItem"></cu-grid-media>
						</view>

					</view>
				</view>
			</view>
			<view class="margin-line" v-else>
				<cu-grid cols="5" :datas="classflys"></cu-grid>
				<cu-grid-media cols="2" :datas="goods" @onchange="onSelectItem"></cu-grid-media>
			</view>
			<view style="height: 100rpx;margin-top: 1rem;"></view>
		</view>
		<cu-navbar selectIndex="0" :isBottom="true"></cu-navbar>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import cuTitle from '@/components/diy/content/cu-title.vue';
	import cuSearch from '@/components/diy/header/cu-search.vue';
	import cuTabbar from '@/components/diy/header/cu-tabbar.vue';
	//footer
	import cuNavbar from '@/components/diy/footer/cu-navbar.vue';
	//轮播
	import cuSwiper from '@/components/diy/content/cu-swiper.vue';
	//list
	import cuGrid from '@/components/diy/list/cu-grid.vue';
	import cuGridMedia from '@/components/diy/list/cu-grid-media.vue';
	import {login} from '@/services/test.js';
	export default {
		computed: {
			...mapState(['hasLogin', 'forcedLogin', 'userinfo'])
		},
		components: {
			cuNavbar,
			cuSearch,
			cuTabbar,
			cuSwiper,
			cuGrid,
			cuTitle,
			cuGridMedia
		},
		data() {
			return {
				current: 0,
				tabs: [{

						name: '首页',
						color: 'red',
						cuIcon: 'btn'
					},
					{

						name: '手机',
						color: 'red',
						cuIcon: 'btn'
					},
					{

						name: '运动',
						color: 'red',
						cuIcon: 'btn'
					},
					{

						name: '生鲜',
						color: 'red',
						cuIcon: 'btn'
					},
					{

						name: '服装',
						color: 'red',
						cuIcon: 'btn'
					}
				],
				menus: [{
						name: '超市',
						color: 'red',
						cuIcon: 'btn',
						path: '/pages/shop/child/branch_venue'
					},
					{
						name: '手机',
						color: 'red',
						cuIcon: 'btn',
						path: '/pages/shop/child/branch_venue'
					},
					{
						name: '运动',
						color: 'red',
						cuIcon: 'btn',
						path: '/pages/shop/child/branch_venue'
					},
					{
						name: '生鲜',
						color: 'red',
						cuIcon: 'btn',
						path: '/pages/shop/child/branch_venue'
					},
					{
						name: '服装',
						color: 'red',
						cuIcon: 'btn',
						path: '/pages/shop/child/branch_venue'
					},
					{
						name: '电脑',
						color: 'red',
						cuIcon: 'btn',
						path: '/pages/shop/child/branch_venue'
					},
					{
						name: '母婴用品',
						color: 'red',
						cuIcon: 'btn',
						path: '/pages/shop/child/branch_venue'
					},
					{
						name: '生活服务',
						color: 'red',
						cuIcon: 'btn',
						path: '/pages/shop/child/branch_venue'
					},
					{
						name: '每日礼包',
						color: 'red',
						cuIcon: 'btn',
						path: '/pages/shop/child/branch_venue'
					},
					{
						name: '超级会员',
						color: 'red',
						cuIcon: 'btn',
						path: '/pages/shop/child/branch_venue'
					}
				],
				goods: this.$mock.goods,
				classflys: this.$mock.classflys
			}
		},
		onLoad() {
			console.log(this.$services)
			login({
				username: 'admin',
				password: '123456'
			}).then((data) => {
				console.log(data);
			})
		},
		methods: {
			onSwitchTab: function(e) {
				this.current = e;
				console.log(e)
			},
			onSelectItem: function(e) {

				if (this.current == 0) {
					let good = this.goods[e];
					this.$util.redirectTo('/pages/shop/child/goodsdetail', {
						title: good.name
					})
				} else {
					this.$util.showAlert("没有商品详情")
				}
				console.log(e)
			}
		}
	}
</script>

<style scoped>

</style>
